<template>
    <div>
        <topHeader />
        <div class="card_con">
            <el-card class="box-card" v-if="interview.length === 0">
                <div slot="header" class="clearfix"> 面试安排 </div>
                <div>这里还没有面试!</div>
            </el-card>
            <div v-else>
                <el-card class="box-card" v-for="item in interview" :key="item.interviewId">
                    <div slot="header" class="clearfix"> 面试安排 </div>
                    <el-descriptions :column="1">
                        <el-descriptions-item label="面试官">{{ item.adminId }}</el-descriptions-item>
                        <el-descriptions-item label="面试人">{{ item.studentId }}</el-descriptions-item>
                        <el-descriptions-item label="面试时间">{{ item.date }}</el-descriptions-item>
                        <el-descriptions-item label="面试状态">
                            <el-tooltip class="item" effect="dark" content="面试未开始" placement="bottom">
                                <i class="el-icon-s-flag" v-if="item.status === 0" />
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="面试已完成" placement="bottom">
                                <i class="el-icon-success" v-if="item.status === 1" />
                            </el-tooltip>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-button type="primary" plain @click="toVideo()">进入面试间</el-button>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import header from '@/components/common/header'
export default {
    components: {
        topHeader: header
    },
    data() {
        return {
            interview: [{
                interviewId: 1,
                date: '2022-09-22',
                status: 0,
                remarks: '',
                studentId: 'anna',
                adminId: '面试官1'
            }]
        }
    },
    created() {
        this.getInterview()
    },
    mounted() { },
    methods: {
        toVideo() {
          this.$router.push({path: '/program'})
        },
        getInterview() {
            this.interview = [{
                interviewId: null,
                date: '2022-09-22',
                status: 0,
                remarks: '',
                studentId: 'anna',
                adminId: 'tom'
            }]
        }
    }
}
</script>

<style scope>
.card_con {
    height: 488px;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    /* align-items: center; */
}

.el-descriptions-item {
    font-size: 16px;
}

.el-icon-success {
    color: #67c23a
}

.el-icon-s-flag {
    color: #409eff;
}

.el-descriptions-item__content i {
    height: 100%;
    display: flex;
    align-items: center;
}

.box-card {
    width: 300px;
    height: 260px;
    padding: 12px;
    border-radius: 8px;
}
</style>